@import '~styles/config.scss';

.main {
    padding   : 20px;
    // overflow  : hidden;
    // overflow-y: auto;
    // max-height: 50vh;
}

.ul {

    display  : flex;
    flex-wrap: wrap;

    margin: -10px 0px 0px -20px;

    .li{
        background: #fff;
        position  : relative;
       
        margin    : 20px 0px 0px 20px;
        box-sizing: border-box;
    }
    .add {
        background: #fff;
        position  : relative;
        width     : 140px;
        height    : 140px;
        margin    : 20px 0px 0px 20px;
        box-sizing: border-box;
    }

    .li {
        cursor: pointer;
    }

    .audio,
    .img {
        object-fit   : cover;
        width        : 100%;
        height       : 100%;
        display      : block;
        border-radius: 4px;
    }
    .audioHide{
        // visibility: hidden;
    }

    .del {
        position  : absolute;
        right     : -4px;
        top       : -4px;
        width:24px; height:24px;
        line-height:24px; text-align: center;
        background: $--background-color-base;
        border-radius: 0px 10px 0px 10px;
        font-size: 12px;
        border    : 4px solid #fff;
        transition: all  .5s;
        &:hover{
            background: $--color-danger;
            color:#fff;
            border    : 4px solid #fff;
        }
    }

    .add {

        border         : 1px dashed $--border-color-base;
        display        : flex;
        align-items    : center;
        justify-content: center;
        text-align     : center;
        border-radius  : 4px;

        i {
            font-size: 24px;
            color    : #999;
        }

    }

    .add input {
        position    : absolute;
        // font-size: 100px;
        right       : 0;
        top         : 0;
        opacity     : 0;
        // width:0px; height:0px;
        width       : 100%;
        height      : 100%;

        cursor: pointer
    }
}
